<template>
  <el-drawer v-model="drawerVisible" :z-index="1000" :destroy-on-close="true" size="560px" :title="`${drawerProps.title}`">
    <el-form
      ref="appDataFormRef"
      label-width="120px"
      label-suffix=" :"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="实验名称">
        <el-input v-model="drawerProps.row!.appName" clearable></el-input>
      </el-form-item>
      <el-form-item label="实验时间">
        <el-input v-model="drawerProps.row!.appTime" clearable></el-input>
      </el-form-item>
      <el-form-item label="教室信息">
        <el-input v-model="drawerProps.row!.classroom" clearable></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="drawerProps.row!.deviceName" clearable></el-input>
      </el-form-item>
      <el-form-item label="实验数据">
        <el-input v-model="drawerProps.row!.labData" clearable></el-input>
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input v-model="drawerProps.row!.userName" clearable></el-input>
      </el-form-item>
    </el-form>
    <div class="fileList">
      <div class="fileItem" v-for="item in appDataDtl.labReportList" :key="item.fileName">
        <div class="fileName">{{ `文件名称：${item.fileName}.${item.fileSuffix}` }}</div>
        <a class="downloadBtn" :href="`${VITE_API_URL}/file/download/${item.encryptFileId}`">下载</a>
      </div>
    </div>
    <div class="imgList">
      <el-image
        class="imgItem"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="appDataDtl.relatedPictureList.map((item:any) => `${VITE_API_URL}/file/download/${item.encryptFileId}`)"
        :initial-index="4"
        :src="`${VITE_API_URL}/file/download/${item.encryptFileId}`"
        v-for="item in appDataDtl.relatedPictureList"
        :key="item.fileName"
        fit="cover"
      />
    </div>

    <template #footer>
      <el-button @click="_colse">取消</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="ExamQuestionDrawer">
import { ref } from "vue";
import { FormInstance } from "element-plus";
import { AppData, ResultData } from "@/api/interface";
import { getAppDataDtl } from "@/api/modules/appDataManage/index";
import { VITE_API_URL } from "@/config/index";
interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<AppData.ResAppDataList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  resetTableList?: () => void;
}

const appDataDtl: any = ref({});
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});
// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;

  try {
    const { result } = (await getAppDataDtl({ appDataId: drawerProps.value.row!.appDataId as string })) as ResultData;
    appDataDtl.value = result;
  } catch (error) {}
};

// 提交数据（新增/编辑）
const appDataFormRef = ref<FormInstance>();

/**
 * 关闭弹窗
 */
const _colse = () => {
  drawerVisible.value = false;
  appDataFormRef.value && appDataFormRef.value.resetFields();
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
.fileList {
  margin: 10px 0 20px;
  .fileItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid #eeeeee;
    .fileName {
      flex: 1;
      width: 0;
      overflow: hidden;
      color: #666666;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .downloadBtn {
      width: 100px;
      color: var(--el-color-primary);
      text-align: center;
    }
  }
}
.imgList {
  padding: 0 20px;
  .imgItem {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border: 1px solid #eeeeee;
  }
}
</style>
